<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<style>
			/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

			/* Document
         ========================================================================== */

			/**
       * 1. Correct the line height in all browsers.
       * 2. Prevent adjustments of font size after orientation changes in iOS.
       */

			html {
				line-height: 1.15; /* 1 */
				-webkit-text-size-adjust: 100%; /* 2 */
			}

			/* Sections
         ========================================================================== */

			/**
       * Remove the margin in all browsers.
       */

			body {
				margin: 0;
			}

			/**
       * Render the `main` element consistently in IE.
       */

			main {
				display: block;
			}

			/**
       * Correct the font size and margin on `h1` elements within `section` and
       * `article` contexts in Chrome, Firefox, and Safari.
       */

			h1 {
				font-size: 2em;
				margin: 0.67em 0;
			}

			/* Grouping content
         ========================================================================== */

			/**
       * 1. Add the correct box sizing in Firefox.
       * 2. Show the overflow in Edge and IE.
       */

			hr {
				box-sizing: content-box; /* 1 */
				height: 0; /* 1 */
				overflow: visible; /* 2 */
			}

			/**
       * 1. Correct the inheritance and scaling of font size in all browsers.
       * 2. Correct the odd `em` font sizing in all browsers.
       */

			pre {
				font-family: monospace, monospace; /* 1 */
				font-size: 1em; /* 2 */
			}

			/* Text-level semantics
         ========================================================================== */

			/**
       * Remove the gray background on active links in IE 10.
       */

			a {
				background-color: transparent;
			}

			/**
       * 1. Remove the bottom border in Chrome 57-
       * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
       */

			abbr[title] {
				border-bottom: none; /* 1 */
				text-decoration: underline; /* 2 */
				text-decoration: underline dotted; /* 2 */
			}

			/**
       * Add the correct font weight in Chrome, Edge, and Safari.
       */

			b,
			strong {
				font-weight: bolder;
			}

			/**
       * 1. Correct the inheritance and scaling of font size in all browsers.
       * 2. Correct the odd `em` font sizing in all browsers.
       */

			code,
			kbd,
			samp {
				font-family: monospace, monospace; /* 1 */
				font-size: 1em; /* 2 */
			}

			/**
       * Add the correct font size in all browsers.
       */

			small {
				font-size: 80%;
			}

			/**
       * Prevent `sub` and `sup` elements from affecting the line height in
       * all browsers.
       */

			sub,
			sup {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
			}

			sub {
				bottom: -0.25em;
			}

			sup {
				top: -0.5em;
			}

			/* Embedded content
         ========================================================================== */

			/**
       * Remove the border on images inside links in IE 10.
       */

			img {
				border-style: none;
			}

			/* Forms
         ========================================================================== */

			/**
       * 1. Change the font styles in all browsers.
       * 2. Remove the margin in Firefox and Safari.
       */

			button,
			input,
			optgroup,
			select,
			textarea {
				font-family: inherit; /* 1 */
				font-size: 100%; /* 1 */
				line-height: 1.15; /* 1 */
				margin: 0; /* 2 */
			}

			/**
       * Show the overflow in IE.
       * 1. Show the overflow in Edge.
       */

			button,
			input { /* 1 */
				overflow: visible;
			}

			/**
       * Remove the inheritance of text transform in Edge, Firefox, and IE.
       * 1. Remove the inheritance of text transform in Firefox.
       */

			button,
			select { /* 1 */
				text-transform: none;
			}

			/**
       * Correct the inability to style clickable types in iOS and Safari.
       */

			button,
			[type="button"],
			[type="reset"],
			[type="submit"] {
				-webkit-appearance: button;
			}

			/**
       * Remove the inner border and padding in Firefox.
       */

			button::-moz-focus-inner,
			[type="button"]::-moz-focus-inner,
			[type="reset"]::-moz-focus-inner,
			[type="submit"]::-moz-focus-inner {
				border-style: none;
				padding: 0;
			}

			/**
       * Restore the focus styles unset by the previous rule.
       */

			button:-moz-focusring,
			[type="button"]:-moz-focusring,
			[type="reset"]:-moz-focusring,
			[type="submit"]:-moz-focusring {
				outline: 1px dotted ButtonText;
			}

			/**
       * Correct the padding in Firefox.
       */

			fieldset {
				padding: 0.35em 0.75em 0.625em;
			}

			/**
       * 1. Correct the text wrapping in Edge and IE.
       * 2. Correct the color inheritance from `fieldset` elements in IE.
       * 3. Remove the padding so developers are not caught out when they zero out
       *    `fieldset` elements in all browsers.
       */

			legend {
				box-sizing: border-box; /* 1 */
				color: inherit; /* 2 */
				display: table; /* 1 */
				max-width: 100%; /* 1 */
				padding: 0; /* 3 */
				white-space: normal; /* 1 */
			}

			/**
       * Add the correct vertical alignment in Chrome, Firefox, and Opera.
       */

			progress {
				vertical-align: baseline;
			}

			/**
       * Remove the default vertical scrollbar in IE 10+.
       */

			textarea {
				overflow: auto;
			}

			/**
       * 1. Add the correct box sizing in IE 10.
       * 2. Remove the padding in IE 10.
       */

			[type="checkbox"],
			[type="radio"] {
				box-sizing: border-box; /* 1 */
				padding: 0; /* 2 */
			}

			/**
       * Correct the cursor style of increment and decrement buttons in Chrome.
       */

			[type="number"]::-webkit-inner-spin-button,
			[type="number"]::-webkit-outer-spin-button {
				height: auto;
			}

			/**
       * 1. Correct the odd appearance in Chrome and Safari.
       * 2. Correct the outline style in Safari.
       */

			[type="search"] {
				-webkit-appearance: textfield; /* 1 */
				outline-offset: -2px; /* 2 */
			}

			/**
       * Remove the inner padding in Chrome and Safari on macOS.
       */

			[type="search"]::-webkit-search-decoration {
				-webkit-appearance: none;
			}

			/**
       * 1. Correct the inability to style clickable types in iOS and Safari.
       * 2. Change font properties to `inherit` in Safari.
       */

			::-webkit-file-upload-button {
				-webkit-appearance: button; /* 1 */
				font: inherit; /* 2 */
			}

			/* Interactive
         ========================================================================== */

			/*
       * Add the correct display in Edge, IE 10+, and Firefox.
       */

			details {
				display: block;
			}

			/*
       * Add the correct display in all browsers.
       */

			summary {
				display: list-item;
			}

			/* Misc
         ========================================================================== */

			/**
       * Add the correct display in IE 10+.
       */

			template {
				display: none;
			}

			/**
       * Add the correct display in IE 10.
       */

			[hidden] {
				display: none;
			}

		</style>
		<style>
			html {
				/* font-size: 100px; */
				padding: 0;
				margin: 0;
			}
			html,
			.prevent-select {
				-webkit-user-select: none; /* Safari */
				-ms-user-select: none; /* IE 10 and IE 11 */
				user-select: none; /* Standard syntax */
			}
			.main {
				box-sizing: border-box;
				position: relative;
				color: rgb(187, 187, 187);
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				margin: 0;
				padding: 0.5rem 8vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.title-wrap {
				display: flex;
				align-items: center;
				height: 1.5rem;
				width: 100vw;
				box-sizing: border-box;
				margin-top: 0;
				margin-bottom: .3rem;
			}
			.hidden {
				display: none;
			}
			.title {
				width: 62%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: left;
				background-image: url("");
			}
			.title-sp {
				width: 1.2rem;
				height: 1rem;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("");
			}
			.keyboard-icon {
				width: 0.9rem;
				height: 0.9rem;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("");
			}
			.mouse-icon {
				width: 0.6rem;
				height: 0.7rem;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("");
			}
			.exit-icon {
				width: 0.5rem;
				height: 0.5rem;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("");
			}
			.press-esc {
				width: 72%;
				height: 72%;
				align-items: center;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				background-image: url("");
			}
			.buttons {
				margin-bottom: .2rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
			}
			button {
				font-family: "Lucida Handwriting", "Brush Script MT", Verdana;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				border-radius: 0.2rem;
				height: 31vh;
				width: 25vw;
				cursor: pointer;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				transition-duration: 0.4s;
			}

			button.btn_block.locked {
				background: rgba(95, 95, 95, 0.8);
				border: 2px solid #fdfdfd;
			}
			button.btn_block.unlocked {
				background: rgba(255, 116, 35, 0.2);
				border: 2px solid #ff9123;
			}
			button#btn_exit {
				background: rgba(110, 10, 10, 0.2);
				border: 2px solid #FF2332;
			}
			button.btn_block.locked:hover {
				background-color: #3882c7;
			}
			button.btn_block.unlocked:hover {
				background-color: #ff9123;
			}
			button#btn_exit:hover {
				background-color: #FF2332;
			}
			.sign, .ver {
				cursor: default;
				font-family: "Brush Script MT", Verdana;
				text-align: right;
				font-size: .24rem;
				color: #999;
			}

			.circles {
				position: fixed;
				z-index: -1;
				margin: 0;
				padding: 0;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				overflow: hidden;
			}
			.circles.unlocked {
				background: rgba(8, 13, 27, 0.973);
			}
			.circles.locked {
				background: rgba(10, 10, 10, 0.9);
			}


			.circles li {
				z-index: -1;
				position: absolute;
				display: block;
				list-style: none;
				width: .2rem;
				height: .2rem;
				bottom: -1.2rem;
				animation: animate 25s linear infinite;
			}
			.circles.unlocked li {
				background: rgba(255, 255, 255, 0.103);
				animation-play-state:running;
			}
			.circles.locked li {
				animation-play-state:paused;
				background: rgba(255, 100, 100, 0.31);
			}

			.circles li:nth-child(1) {
				left: 25%;
				width: 0.5rem;
				height: 0.5rem;
				animation-delay: 0s;
			}

			.circles li:nth-child(2) {
				left: 10%;
				width: .2rem;
				height: .2rem;
				animation-delay: 2s;
				animation-duration: 12s;
			}

			.circles li:nth-child(3) {
				left: 70%;
				width: .2rem;
				height: .2rem;
				animation-delay: 4s;
			}

			.circles li:nth-child(4) {
				left: 40%;
				width: 0.4rem;
				height: 0.4rem;
				animation-delay: 0s;
				animation-duration: 18s;
			}

			.circles li:nth-child(5) {
				left: 65%;
				width: .2rem;
				height: .2rem;
				animation-delay: 0s;
			}

			.circles li:nth-child(6) {
				left: 75%;
				width: .8rem;
				height: .8rem;
				animation-delay: 3s;
			}

			.circles li:nth-child(7) {
				left: 35%;
				width: 1rem;
				height: 1rem;
				animation-delay: 7s;
			}

			.circles li:nth-child(8) {
				left: 50%;
				width: 15px;
				height: 15px;
				animation-delay: 15s;
				animation-duration: 45s;
			}

			.circles li:nth-child(9) {
				left: 20%;
				width: 8px;
				height: 8px;
				animation-delay: 2s;
				animation-duration: 35s;
			}

			.circles li:nth-child(10) {
				left: 85%;
				width: 1rem;
				height: 1rem;
				animation-delay: 0s;
				animation-duration: 11s;
			}

			@keyframes animate {
				0% {
					transform: translateY(0) rotate(0deg);
					opacity: 1;
					border-radius: 25%;
				}

				100% {
					transform: translateY(-500px) rotate(540deg);
					opacity: 0;
					border-radius: 45%;
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div id="title" class="title-wrap" onmousedown="neutron.DragTitleBar()">
				<div class="title"></div>
				<div class="title-sp hidden"></div>
			</div>
			<div class="buttons">
				<button class="unlocked btn_block" id="btn_kbd" onclick="ahk.Clicked(event)">
					<div class="keyboard-icon"></div>
				</button>
				<button class="unlocked btn_block" id="btn_mouse" onclick="ahk.Clicked(event)">
					<div class="mouse-icon"></div>
					<div class="press-esc hidden"></div>
				</button>
				<button id="btn_exit" onclick="ahk.Clicked(event)">
					<div class="exit-icon"></div>
				</button>
			</div>
			<div class="sign"><span>github.com/Nigh</span></div>
			<div class="ver"><span id="iwck"></span><br><span id="ahk"></span></div>
		</div>
		<div class="area">
			<ul class="circles unlocked">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
